<template>
  <view>
    <view class="goodsDetial" v-if="goodDetail.goods_price">
      <!-- 轮播图 -->
      <swiper class="myswiper" indicator-dots autoplay circular interval="2000" duration="500">
        <!-- @click="preivewImg(index)"  -->
        <swiper-item v-for="(item, index) in goodDetail.pics" :key="index"><image @click="preivewImg(index)" class="myimg" :src="item.pics_big" mode=""></image></swiper-item>
      </swiper>
      <!-- 商品信息区域 -->
      <view class="info">
        <view class="price">￥{{ goodDetail.goods_price }}</view>
        <view class="name">
          <view class="left">{{ goodDetail.goods_name }}</view>
          <view class="right">
            <uni-icons type="star" size="20"></uni-icons>
            收藏
          </view>
        </view>
        <view class="foot">快递：免运费</view>
      </view>
      <!-- 商品详情 -->
      <rich-text :nodes="goodDetail.goods_introduce" ></rich-text>
      <!-- 购物车按钮-->
      <view class="goodsNav"><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
    </view>
  </view>
</template>

<script>
import { mapMutations,mapGetters } from 'vuex';
export default {
  data() {
    return {
      goods_id: '',
      goodDetail: {},
      options: [
        {
          icon: 'headphones',
          text: '客服'
        },
        {
          icon: 'cart',
          text: '购物车',
          info: 0
        }
      ],
      buttonGroup: [
        {
          text: '加入购物车',
          backgroundColor: '#ff0000',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: '#ffa200',
          color: '#fff'
        }
      ]
    };
  },
  computed:{
    ...mapGetters('cart',['total'])
  },
  watch:{
    total:{
      handler(newValue){
      this.options[1].info=newValue
    },
    immediate:true
    }
  },
  methods: {
    ...mapMutations({
      addCart: 'cart/addCart'
    }),
    // 获取购物车图标的事件
    onClick(e) {
      console.log('购物车', e);
      if (e.content.text === '购物车') {
        uni.switchTab({
          url: '/pages/cart/cart'
        });
      }
    },
    // 加入购物车的事件
    buttonClick(e) {
      console.log(e);
      if (e.content.text === '加入购物车') {
        const goodsObj = {
          goods_id: this.goodDetail.goods_id,
          goods_name: this.goodDetail.goods_name,
          goods_price: this.goodDetail.goods_price,
          goods_small_logo: this.goodDetail.goods_small_logo,
          goods_count: 1,
          goods_status:true,//选中的状态
        };
        this.addCart(goodsObj);
        uni.showToast({
          icon: 'success',
          title: '添加购物车成功'
        });
      }
    },
    // 获取商品详情的数据
    async getGoodDetail() {
      const { data: res } = await uni.$http.get(`/api/public/v1/goods/detail?goods_id=${this.goods_id}`);
      if (res.meta.status !== 200) return uni.$showMsg();
      this.goodDetail = res.message;
      // 将图文详情中的图片添加样式
      this.goodDetail.goods_introduce = this.goodDetail.goods_introduce.replace(/<img /g, '<img style="display: block;" ');
    },
    // 大图预览功能
    preivewImg(index) {
      // 得到图片的数组
      const imgUrls = this.goodDetail.pics.map(item => {
        return item.pics_big;
      });
      // 进入大图的预览模式
      uni.previewImage({
        current: index, // 默认显示图片的索引
        urls: imgUrls
      });
    }
  },
  onLoad(options) {
    this.goods_id = options.goods_id;
    this.getGoodDetail();
  }
};
</script>

<style lang="scss">
.goodsDetial {
  .myswiper {
    width: 100%;
    height: 750rpx;

    .myimg {
      width: 100%;
      height: 750rpx;
    }
  }
}
.info {
  .price {
    font-size: 30px;
    color: red;
    margin: 10px;
  }

  .name {
    display: flex;
    align-items: center;
    padding: 10px;

    .left {
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-right: 30px;
    }
    .right {
      width: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      border-left: 1px solid #ccc;
    }
  }
  .foot {
    margin: 10px;
    font-size: 14px;
    color: #ccc;
  }
}
.goodsNav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
